<template>
	<view class="" v-if="orderDetail.asstatus_id">
		<view class="top-wrapper">
			<!-- 退款关闭 -->
			<!-- <view class="inset-group">
				<van-cell size="30px" center="true">
					<view slot="title" class="address-wrapper" style="justify-content: space-between;">
						<view class="address-info">
							<view>
								<text class="name" style="font-weight: bold;">退款关闭</text>
								<view class="phone" style="">2021-11-15 10:12:00</view>
							</view>
						</view>
					</view>
				</van-cell>
			</view> -->
			<!-- 等待商家处理 -->
			<!--   v-if="orderDetail.asstatus_id!=200" -->
			<view class="inset-group" v-if="orderDetail.asstatus_id!=200">
				<view class="cell-wrap">
					<view class="address-wrapper" style="justify-content: space-between;">
						<view class="address-info">
							<view>
								<text class="name" style="font-weight: bold;">{{orderDetail.asstatus_id_status}}</text>
								<view class="phone" style="">{{orderDetail.asstatus_sku.aliResultMsg}}</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="!isRefundCause">
					<uni-steps class="steps-wrapper" :options="steps" active-color="#db592a" active-icon="checkbox" :active="orderDetail.asstatus_id==200?2:1" />
				</template>
			</view>
			<!-- 退款成功 -->
			<view class="inset-group" v-if="orderDetail.asstatus_id==200">
				<view class="cell-wrap">
					<view class="address-wrapper" style="justify-content: space-between;">
						<view class="address-info">
							<view>
								<text class="name" style="font-weight: bold;">退款成功</text>
								<view class="phone" style="">请您留意是否到账</view>
							</view>
						</view>
					</view>
				</view>
			</view> 
		</view>		
		<view class="time-wrapper" v-if="activeStatus==1||activeStatus==3">
			商家会在<text>{{time.day}}</text>天<text>{{time.hours}}</text>时<text>{{time.hours}}</text>分<text>{{time.seconds}}</text>内处理，请您耐心等待
		</view>
		<view class="refund-status">
			<view class="refund-close" v-if="false">
				<view>您已撤销本次退款申请</view>
				<view>建议您和商家确认发货时间，避免后续产生误会</view>
			</view>
			<!--  v-if="orderDetail.refund&&orderDetail.refund.status !=='SUCCESS'" -->
			<view class="refund-close" v-if="orderDetail.asstatus_id==1">
				<view>您已成功发起申请，请耐心等待商家处理</view>
			</view>
			<view class="refund-success">
				<view class="title">
					退款金额
					<text>￥{{(orderDetail.total_payprice)/100}}</text>
				</view>
				<view class="desc" v-if="isRefundCause">
					退款原因：{{orderDetail.asstatus_sku.refundCause}}
				</view>
				<view class="desc" v-if="orderDetail.asstatus_id==200">
					退款金额已原路返回到支付账户
					<text>未收到退款，请联系客服</text>
				</view>
				<view class="desc" v-if="orderDetail.asstatus_id==500&&orderDetail.asstatus_sku.isEditExp == 'y'" @click="goBackGoods" style="display: flex;">
					拒绝原因：物流单号校验被拒绝
					<view>
						修改单号
					</view>
				</view>
				
				<template v-if="isRefundCause&&orderDetail.asstatus_id!=500&&orderDetail.asstatus_id!=200">
					<uni-steps class="steps-wrapper" :options="steps2" active-color="#db592a" active-icon="checkbox" :active="activeStatus" />
					<!-- <u-steps class="steps-wrapper" :current="(activeStatus)" :activeColor="'#db592a'">
						<u-steps-item v-for="(item,index) in steps2" :title="item.text">
						</u-steps-item>
					</u-steps> -->
				</template>				
			</view>
		</view>
		
		<view class="goods-info">
			<view class="title">
				退款商品
			</view>
			<view class="top-desc">
				<image :src="orderDetail.pic" mode="widthFix"></image>
				<view class="center-desc">
					<text class="title">{{orderDetail.goods_title}}</text>
					<text class="tag">{{orderDetail.goods_skuname}}</text>
					<!-- <van-tag class="tag" size="medium" color="#f5f5f5" text-color="#777">{{orderDetail.goods_skuname}}</van-tag> -->
					<!-- <van-tag class="tag" size="medium" color="#fff" text-color="#f4c883">发货时间：付款后3天内</van-tag> -->
				</view>
			</view>
			<view class="bottom-info">	
				<view class="item">
					<view>
						<text>退款金额</text>
						<text style="color: #000;">￥{{(orderDetail.total_payprice)/100}}</text>
					</view>					
				</view>
				<view class="item">
					<view>
						<text>申请时间</text>
						<text style="color: #000;">{{orderDetail.asstatus_sku.lastUpdate?orderDetail.asstatus_sku.lastUpdate:""}}</text>
					</view>					
				</view>
				<view class="item">
					<view>
						<text>订单编号</text>
						<text style="color: #000;">{{orderDetail.order_id}}</text>
						<text class="copy" @click="copy">
							复制
						</text>
					</view>	
				</view>
			</view>
		</view>		
		<view class="goods-info" v-if="orderDetail.asstatus_sku.aliRefundExpnum">
			<view class="title">
				退货信息
			</view>
			<view class="bottom-info">	
				<view class="item">
					<view>
						<text>物流单号</text>
						<text style="color: #000;">{{orderDetail.asstatus_sku.aliRefundExpnum}}</text>
					</view>					
				</view>
				<view class="item">
					<view>
						<text>物流公司</text>
						<text style="color: #000;">{{orderDetail.asstatus_sku.aliRefundExpname?orderDetail.asstatus_sku.aliRefundExpname:orderDetail.asstatus_sku.aliRefundExpengname}}</text>
					</view>					
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				steps: [
				    {
				      title: '提交申请',
				      // desc: '2021-11-15 12:00:00',
				      inactiveIcon: 'location-o',
				      activeIcon: 'success',
				    },
					{
					  title: '商家处理',
					  // desc: '2021-11-15 12:00:00',
					  inactiveIcon: 'location-o',
					  activeIcon: 'success',
					},
				    {
				     title: '退款成功',
				     // desc: '2021-11-15 12:00:00',
				      inactiveIcon: 'like-o',
				      activeIcon: 'plus',
				    }
				],
				steps2: [
				    {
				      title: '提交申请',
				      desc: '',
				      inactiveIcon: 'location-o',
				      activeIcon: 'success',
				    },
				    {
				     title: '商家处理',
				     desc: '',
				      inactiveIcon: 'like-o',
				      activeIcon: 'plus',
				    },
					{
					 title: '寄回商品',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					},
					{
					 title: '商家退款',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					},
					{
					 title: '退款成功',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					}
				],
				orderDetail:{},
				isRefundCause:false,
				time:{
					day:"00",
					hours:"00",
					minutes:"00",
					seconds:"00"
				},
				timer:null
			}
		},
		computed:{
			activeStatus(){
				let result = 1;
				switch (this.orderDetail.asstatus_id){
					case 103:
						result = 3
						break;
					case 102:
						if(this.orderDetail.asstatus_sku.aliRefundExpnum){
							result = 3
						}else{
							result = 2
						}						
						break;
					case 200:
						result = 4
						break;
					case 101:
						result = 1
						break;
				}
				return result
			}
		},
		async onLoad(options) {
			await this.$onLaunched;	
			this.init(options.order_id)
		},
		methods: {
			initTime(){
				clearInterval(this.timer);
				let day = this.activeStatus == 1?3:this.activeStatus==3?7:0;
				if(day!==0){
					this.timer = setInterval(()=>{
						let create_time = new Date(Date.parse(this.orderDetail.asstatus_sku.lastUpdate.replace(/-/g,   "/")))
						let time = (day*24*60*60*1000)-(new Date().getTime()-create_time.getTime());
						if(time>0){
							this.time = this.timeConversion(time)
						}else{
							clearInterval(this.timer);
						}
					},1000)
				}
			},
			timeConversion(duration) {	
				var milliseconds = parseInt((duration%1000)/100)
			        , seconds = parseInt((duration/1000)%60)
			        , minutes = parseInt((duration/(1000*60))%60)
			        , hours = parseInt((duration/(1000*60*60))%24)
					, day = parseInt((duration/(1000*60*60))/24);
			
				day = (day < 10) ? "0" + day : day;
			    hours = (hours < 10) ? "0" + hours : hours;
			    minutes = (minutes < 10) ? "0" + minutes : minutes;
			    seconds = (seconds < 10) ? "0" + seconds : seconds;
			    return {
					day,
					hours,
					minutes,
					seconds
				};
			},
			init(orederId){
				if(orederId){
					this.getDetail(orederId)
				}else{
					uni.showToast({
						icon:"none",
						title:"该订单不支持售后！"
					})
				}
			},
			getDetail(orderId){
				uni.showLoading()
				api.getOrderDetail({
					order_id:orderId+""
				}).then((res)=>{
					if(res.status==0){
						this.orderDetail = res.data.order;
						this.empty = false
						if(this.orderDetail.asstatus_sku.refundCause){
							this.isRefundCause = true
						}
						this.initTime()
						if(this.orderDetail.asstatus_id==102&&!this.orderDetail.asstatus_sku.aliRefundExpnum){							
							this.goBackGoods();
						}
					}
					uni.hideLoading()
				})
			},
			goBackGoods(){
				this.$uniGo('redirectTo',{
					url:"./goods-back?order_id="+this.orderDetail.order_id
				})
				// uni.redirectTo({
				// 	url:"./goods-back?order_id="+this.orderDetail.order_id
				// })
			},
			copy(){
				uni.setClipboardData({
				  data: this.orderDetail.order_id+'',
				  success (res) {
				    uni.showToast({
				    	title:"复制成功"
				    })
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-wrapper{
		text-align: center;
		line-height: 3;
		text{
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			text-align: center;
			line-height: 40rpx;
			// box-shadow: 1rpx 1rpx 3rpx rgba(0, 0, 0, .4);
			border-radius: 4rpx;
			margin: 0 6rpx;
			color: #db592a;
		}
	}
	.cell-wrap{
		padding: 20rpx;
	}
	.steps-wrapper{
		margin: 50rpx 0 30px;
	}
	.top-wrapper{
		padding: 30rpx 30rpx 1rpx;
		// background: linear-gradient(to right, #fa7f3f, #fb3a28);
		background: $theme-color;
		.order-status{
			color: #fff;
			text-align: center;
			font-size: 36rpx;
			padding-bottom: 30rpx;
			text{
				display: block;
				font-size: 28rpx;
				// line-height: 2;
			}
		}
	}
	.btn-group{
		text-align: right;
		van-button{
			margin-right:20rpx;
		}
	}
	.address-wrapper{
		display: flex;
		align-items: center;
		image{
			width: 80rpx;
			min-width: 80rpx;
			max-width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.address-info{
			font-size: 24rpx;
			flex: 1;
			.name{
				font-size: 30rpx;
				// font-weight: bold;
				margin-right: 15rpx;
				margin-bottom: 10rpx;				
			}
			.phone{
				color: #aeaeae;
				
			}
			.desc{
				line-height: 1.5;
			}
			::v-deep .van-button{
				height: 20px;
			}
		}
	}
	.goods-info{
		font-size: 28rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		.title{
			margin: 10rpx 30rpx 30rpx;
			font-weight: bold;
		}
		.top-desc{
			display: flex;
			align-items: center;
			margin: 20rpx 30rpx;
			image{
				width: 180rpx;
				min-width: 180rpx;
				max-width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			.center-desc{
				margin: 0 50rpx 0 30rpx;
				.title{
					display: block;
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-left:0 ;
				}
				.tag{
					display: block;
					margin: 10rpx 0;
					color: #B7BDC6;
				}
			}
			.right-desc{
				text-align: right;
				.num{
					font-size: 24rpx;
					color: #969799;
				}
			}
		}
		.bottom-info{
			margin: 20rpx 30rpx;
			.item{
				justify-content:space-between;
				line-height: 60rpx;
				font-size: 24rpx;
				position: relative;
				text{
					margin-right: 30rpx;
					color: #aeaeae;
				}
				.copy{
					// position: absolute;
					// right: 30rpx;
					color: #db592a;
				}
			}
		}
	}
	.order-info{
		background: #fff;
		padding-bottom: 120rpx;
		margin-top: 20rpx;
		.title{
			font-size: 32rpx;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx #eee solid;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				top: 38rpx;
				left: 20rpx;
				width: 5rpx;
				height: calc(100% - 70rpx);
				background: #ff4c02;
				border-radius: 5rpx;
			}
		}
		.order-beizhu{
			display: flex;
			text{
				width: 22%;
				min-width: 22%;
				max-width: 22%;
			}
			view{
				font-size: 24rpx;
			}
		}
		.kefu{
			text-align: center;
			font-size: 40rpx;
			// font-weight: bold;
			border-top: 1rpx #eee solid;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			color: #0070ff;
		}
	}
	.red-pkg{
		padding: 0 20rpx;
		image{
			width: 100%;
			height: auto;			
		}
	}
	.btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 50rpx;
		background: #fff;
		box-sizing: border-box;
		text-align: right;
		::v-deep .van-button{
			padding: 0 60rpx;
		}
	}
	.refund-status{
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;		
		.refund-close{
			font-size: 30rpx;
			font-weight: bold;
		}
		.refund-success{
			.title{
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				text{
					color: #db592a;
				}
			}
			.desc{
				font-size: 24rpx;
				line-height: 2;
				margin-top: 20rpx;
				position: relative;				
				view{
					position: absolute;
					right: 0;
					color: #db592a;
				}
				text{
					display: block;
					font-size: 22rpx;
					color: #aeaeae;
				}
			}
		}
	}
	
</style>
